<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
		<script type="text/javascript">
			var sourceObject=new Object();
			function moveObject(source,destination){
				alert(source.outerHTML);
				//destination.innerHTML=source.outerHTML;
				destination.innerHTML=source.innerHTML;
				//destination.innerHTML=source.outerText;
				//destination.innerHTML=source.innerText;
				source.style.display="none";
			}
			function testinnerouter(){
				var testobj=document.getElementById("dragthis");
				alert(testobj.innerText);
				alert(testobj.outerText="<font size='20px'>aaaaa</font>");
				var testobj2=document.getElementById("drop here");
				testobj2.outerText=testobj.innerHTML;
				alert(testobj2.style.backgroundColor);
			}
		</script>
    </head>
    <body>
		<span id="dragthis" style="background-color:#CC6633;"
		ondragstart="sourceObject=event.srcElement;"><p>drag <font size="19px">font</font> this</p></span>
		<div id="drop here" ondragenter="event.returnValue=false;" 
		ondragover="event.returnValue=false;" ondrop="alert(sourceObject.id+' was droped on '+event.srcElement.id)" 
		style="height:100px;width:100px;left:200px;position:absolute;background-color:#0000FF;">&nbsp;</div>
		<div id="drop here2" ondragenter="event.returnValue=false;" 
		ondragover="event.returnValue=false;" ondrop="moveObject(sourceObject,event.srcElement)" 
		style="height:100px;width:100px;top:100px;left:200px;position:absolute;background-color:#999966;">&nbsp;</div>
    	<br>
		<a href="javascript:testinnerouter();">testinnerouter</a>
	</body>
</html>
